import {
  AppstoreOutlined,
  BarChartOutlined,
  DashboardOutlined,
  ThunderboltOutlined,
} from "@ant-design/icons";
import { ProCard } from "@ant-design/pro-components";
import {
  Card,
  Col,
  Collapse,
  Progress,
  Row,
  Statistic,
  Tabs,
  Timeline,
  Typography,
} from "antd";

import React from "react";

import "./index.less";

const { Title } = Typography;

const Page44: React.FC = () => {
  return (
    <div className="page44-page">
      <Title level={2} className="page-title">
        模块化卡片布局
      </Title>
      <ProCard split="vertical" gutter={16}>
        <ProCard colSpan="60%" title="业务概览" extra={<DashboardOutlined />}>
          <Tabs
            items={[
              {
                key: "tab1",
                label: "卡片网格",
                children: (
                  <div className="card-grid">
                    {Array.from({ length: 8 }).map((_, i) => (
                      <Card
                        key={i}
                        title={`卡片 ${i + 1}`}
                        extra={<ThunderboltOutlined />}
                      >
                        <Progress
                          percent={(i + 1) * 10}
                          status={i % 2 ? "active" : "normal"}
                        />
                      </Card>
                    ))}
                  </div>
                ),
              },
              {
                key: "tab2",
                label: "折叠信息",
                children: (
                  <Collapse
                    items={[
                      {
                        key: "c1",
                        label: "性能指标",
                        children: <div>CPU 45% / 内存 63%</div>,
                      },
                      {
                        key: "c2",
                        label: "发布记录",
                        children: <div>上次发布：2024-11-20</div>,
                      },
                    ]}
                  />
                ),
              },
            ]}
          />
        </ProCard>

        <ProCard colSpan="40%" title="时序与统计" extra={<BarChartOutlined />}>
          <Timeline
            items={[
              { color: "green", children: "10:20 构建成功" },
              { color: "blue", children: "10:30 已发布到测试环境" },
              { color: "red", children: "11:10 线上异常已修复" },
            ]}
          />
          <Row gutter={16} style={{ marginTop: 16 }}>
            <Col span={12}>
              <Card>
                <Statistic
                  title="活跃用户"
                  value={2345}
                  prefix={<AppstoreOutlined />}
                />
              </Card>
            </Col>
            <Col span={12}>
              <Card>
                <Statistic title="QPS" value={356} suffix="/s" />
              </Card>
            </Col>
          </Row>
        </ProCard>
      </ProCard>
    </div>
  );
};

export default Page44;
